<template>
	<view class="mycenter-box" >
		<view class="share-btn-box">
			<view class="make-haibao" @click="draw">
				制作海报
			</view>
		</view>
		<view class="share-info">
			移动二维码到合适位置，点击制作海报，然后去分享吧。
		</view>
		<canvas class="firstCanvas" :class="{'firstCanvas22':canvashow}" canvas-id="firstCanvas"></canvas>
		 <movable-area class="share-box" :style="style">
		    <movable-view :x="x" :y="y" class="mova-view" direction="all" @change="onChange"> 
			<tki-qrcode class="code-pic" ref="qrcode" :size="codeSize" :unit="unit" 
			@result="resultqr" :show="show" :loadMake="loadMake" 
			:val="codeVal">
			</tki-qrcode>
			</movable-view>
		</movable-area>
		<view class="bj-box">
			<view class="bj-list" :style="{width:bjListWidth}">
				<image v-for="(item, index) in bjList" @click="selectImg(item)" :src="item" class="bj-item" mode=""></image>
			</view>
		</view>
		<uni-popup ref="popupcenter" type="center">
			<view class="popupcenter-box">
					{{popupCenterMessage}}
			</view>
		</uni-popup>
	</view>
</template>

<script>
	import uniPopup from '@/components/uni-popup/uni-popup.vue'
	import tkiQrcode from "@/components/tki-qrcode/tki-qrcode.vue"
	export default{
		props:['bjList','codeVal','codeSize'],
		components:{
			  uniPopup,
			  tkiQrcode
		},
		data() {
			return {
				code:'',//二维码
				bj:'',//海报背景
				unit:'upx',//二维码大小单位
				show:true,//
				loadMake:true,//加载成功后自动生成二维码
			    x: 0,
				y: 0,
				old: {
					x: 0,
					y: 0
				},
				style:{
					backgroundImage:'url(../../static/share1.jpg)',
					backgroundSize:'540upx 810upx',
					backgroundRepeat: 'no-repeat',
				},//海报背景
				bjj:'',
				canvashow:false,//设置canvas的z-index，
				popupCenterMessage:'',//弹框信息
				bjListWidth:'',
			}
		},
		beforeMount() {
			this.bjListWidth=this.bjList*220+'upx'
			this.bj=this.bjList[0];
			this.style.backgroundImage='url('+this.bj+')'
					
		},
		onLoad(){
			
		},
		methods: {
			// 移动二维码，获取信息
			onChange: function(e) {
					this.old.x = e.detail.x
					this.old.y = e.detail.y
			},
			// 获取二维码
			resultqr:function(e){
				this.code=e
			},
			// 制作分享海报
			draw:function(){
				let _this=this;
				let canStatus={};//背景信息
				let codeStatus={};//二维码信息
				var context = uni.createCanvasContext('firstCanvas');//获取canvas
				let can=uni.createSelectorQuery().select('.firstCanvas');//获取canvas节点信息
				let codeicon=uni.createSelectorQuery().select('.code-pic');//获取二维码节点信息
				codeicon.boundingClientRect(data =>{
					codeStatus=data;
					console.log(codeStatus)
				}).exec();
				can.boundingClientRect(data =>{
					canStatus=data;
					console.log(canStatus)
				}).exec();
				console.log('ada')
				// 获取背景图
			  uni.getImageInfo({
				src: _this.bj ,
				success: function (image) {
					console.log(image);
					setTimeout(function(){
						// 画背景图
						context.drawImage(image.path,0,0,image.width,image.height,0,0,canStatus.width,canStatus.height)
						// 画二维码
						context.drawImage(_this.code,_this.old.x,_this.old.y,_this.codeSize/2,_this.codeSize/2)
						context.draw()
					},10)
					
					// 延迟保存canvas
					setTimeout(function(){
						uni.canvasToTempFilePath({
							canvasId:'firstCanvas',
							fileType:'jpg',
							success:function(res){
								console.log(res.tempFilePath)
								_this.canvashow=true;
								// 判断h5时长按保存
								if(process.env.NODE_ENV === 'development'){
									
									_this.popupCenterMessage='长按保存并分享'
									_this.opencenter();
								}else {
									// 非h5时保存图片
									uni.saveImageToPhotosAlbum({
										filePath:res.tempFilePath,
										success:function(e){
											_this.popupCenterMessage='已保存相册前去分享'	
											_this.opencenter();
											}
									})
								}
								_this.bjj=res.tempFilePath
							}
						})
					},100)
							
				},
				fail() {
					console.log('1111')
				}
			});
			},
			opencenter:function (){
				this.$refs.popupcenter.open()
			},
			selectImg:function(item){
				this.canvashow=false;
				this.style={
					backgroundImage:'url('+item+')',
					backgroundSize:'540upx 810upx',
					backgroundRepeat: 'no-repeat',
				};
				this.bj=item;
			}
		}
	}
	
</script>

<style>
.mycenter-box{
		position: relative;
	}
.share-box{
	width: 540upx;
	margin: 0 auto;
	/* margin-top: 40upx; */
	height: 810upx;
	/* background-color: #09BB07; */
}
.firstCanvas{
	width: 540upx;
	height: 810upx;
	position: absolute;
	left:50%;
	transform:translateX(-50%);
	
}
.firstCanvas22{
	z-index: 20;
}
.mova-view{
	display: block;
	width: 120upx;
	height: 120upx;
	/* background-color: #2C405A; */
	}
	.share-btn-box{
		display: flex;
		justify-content: space-around;
		padding: 30upx 20upx 10upx 20upx;
		
	}
	.make-haibao,.share-btn{
		width: 200upx;
		background-color: #d91829;
		text-align: center;
		color: #FFFFFF;
		font-size: 26upx;
		line-height: 2em;
		height: 52upx;
		border-radius:52upx ;
	}
	.popupCenter-box{
		width: 400upx;
		padding: 40upx ;
		text-align: center;
		border-radius: 20upx;
	}
	.bj-box{
		/* width: 100%;*/
		padding: 20upx 40upx;
		height: 200upx;
		overflow-x: auto;
	}
	.bj-list{
		width: 1400upx;
	}
	.bj-item{
		width: 200upx;
		float: left;
		height: 300upx;
		margin: 0 10upx;
	}
	.share-info{
	font-size: 20upx;
		color: #d91829;
		text-align: center;
		margin: 10upx 0 ;
	}
	.popupcenter-box{
		background-color: #FFFFFF;
		padding: 20upx;
	}
</style>
